/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { Suspense } from "react";
import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom";
import router from "./router/index";
function App() {
  const render = (arr: any) => {
    return (
      arr &&
      arr.map((item: any, index: number) => {
        return (
          <Route
            key={index}
            path={item.path}
            element={
              item.element ? (
                <item.element></item.element>
              ) : (
                <Navigate to={item.to}></Navigate>
              )
            }
          >
            {item.children && render(item.children)}
          </Route>
        );
      })
    );
  };
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>{render(router)}</Routes>
      </Suspense>
    </BrowserRouter>
  );
}
export default App;
